<template>
<!-- template内部写结构(html) -->
<div>
  <p>str: {{ str }}</p>
  <p>{{str}}</p>
  <hr>
  <p>name: {{ obj.name}}</p>
  <p>age: {{ obj.age >= 18 ? '成年了' : '未成年'}}</p>
  <p>desc: {{ obj.desc}}</p>
  <!-- 1.数据一定要在data 中有  错误案例如下-->
  <!-- <p>str: {{ strr }}</p> -->
  <!-- 2.能使用表达式,但是不能用语句 if for  错误案例如下-->
  <!-- <p>{{ if() {}}}</p> -->
  <!-- 3. 不能把插值表达式用在属性上  错误案例如下 v-bind后续会学到-->
  <!-- <p title="{{str}}">{{str}}</p> -->
</div>
  
</template>

<script>
// 写js逻辑的
// console.log('我写了js');
export default {
  data() {
    return {
      str: '学习vue 不能睡觉,睡觉就赚不到钱了',
      obj: {
        name: '小花',
        age: 16,
        desc: '性格温柔'
      }
    }
  }
}
</script>

<style>


</style>